<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎</title>
    <script src="../js/vue3.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/element-plus.js"></script>
    <script src="../js/icons-vue.js"></script>
    <script src="../js/zh-cn.js"></script>
    <script src="../js/echarts.min.js"></script>
    <link rel="stylesheet" href="../css/index.css"/>

</head>
<body>
<div id="app">
    <div id="main" style="width: 600px; height: 600px;"></div>
    <div id="main2" style="width: 600px; height: 600px;"></div>
</div>

<script>
    const {createApp, ref, computed, onMounted, nextTick} = Vue;
    const {ElMessage, ElMessageBox} = ElementPlus;
    createApp({
        setup() {
            const A = () => {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: 'Nightingale Chart',
                            type: 'pie',
                            radius: [50, 250],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: logvo.value
                        }
                    ]
                };

                option && myChart.setOption(option);
            }

            const B = () => {
                var chartDom = document.getElementById('main2');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    xAxis: {
                        type: 'category',
                        data: names.value
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: values.value,
                            type: 'bar'
                        }
                    ]
                };

                option && myChart.setOption(option);

            }

            const logvo = ref([])
            const name = ref([])
            const value = ref([])
            const initData = () => {
                axios.get("/log/style").then(response => {
                    logvo.value = response.data.data
                    A();
                })

            }
            const names = ref()
            const values = ref()
            const initData1 = () => {
                axios.get("/log/style").then(response => {
                    names.value = response.data.data.map(item => item.name);
                    values.value = response.data.data.map(item => item.value);

                    B();
                })

            }
            onMounted(() => {

                initData();
                initData1();
            })


            return {
                initData, logvo, name, value, initData1,names,values,
        }
        }
    }).use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    }).mount('#app');

</script>


</body>
</html>